import { Provider } from 'react-redux';
import { Toaster } from 'react-hot-toast';
import { ErrorBoundary } from 'react-error-boundary';
import { store } from '@/store';
import AppRouter from '@/router';
import ErrorFallback from '@/components/common/ErrorFallback';
import '@/styles/tailwind.css';
import '@/styles/global.less';

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Provider store={store}>
        <div className='App'>
          <AppRouter />
          <Toaster
            position='top-right'
            toastOptions={{
              duration: 4000,
              style: {
                background: '#363636',
                color: '#fff',
              },
              success: {
                duration: 3000,
                style: {
                  background: '#10B981',
                },
              },
              error: {
                duration: 5000,
                style: {
                  background: '#EF4444',
                },
              },
            }}
          />
        </div>
      </Provider>
    </ErrorBoundary>
  );
}

export default App;
